<script lang="ts" setup>
import { PracticeMode } from "@/types/practice";

const props = defineProps<{
  mode: PracticeMode;
}>();

const emit = defineEmits<{
  "update:mode": [value: PracticeMode];
}>();

const modes: { code: PracticeMode; title: string }[] = [
  { code: "exam", title: "答题模式" },
  { code: "view", title: "背题模式" },
];
</script>

<template>
  <div class="flex items-center justify-center">
    <div class="flex rd-2 text-sm of-hidden">
      <div
        v-for="mode in modes"
        :key="mode.code"
        class="px-8 py-1.2 bg-gray-1 c-gray-9 cursor-pointer"
        :class="{ 'bg-gray-7 c-white': props.mode === mode.code }"
        @click="emit('update:mode', mode.code)"
      >
        {{ mode.title }}
      </div>
    </div>
  </div>
</template>
